<template>
  <svg
    :class="['svg-icon', className]"
    :style="iconStyle"
    :width="size"
    :height="size"
    :fill="color"
    :aria-label="iconName"
    v-bind="$attrs"
  >
    <use :xlink:href="symbolId"></use>
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import 'virtual:svg-icons-register'

// 定义组件属性
const props = defineProps<{
  // 图标名称（对应assets/icon目录下的文件名）
  iconName: string
  // 自定义类名
  className?: string
  // 图标颜色
  color?: string
  // 图标大小（宽高相同）
  size?: number | string
  // 图标宽度（会覆盖size）
  width?: number | string
  // 图标高度（会覆盖size）
  height?: number | string
}>()

// 计算SVG的symbolId
const symbolId = computed(() => `#icon-${props.iconName}`)

// 计算图标样式
const iconStyle = computed(() => {
  const style: Record<string, string | number> = {}

  // 处理宽度
  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
  } else if (props.size) {
    style.width = typeof props.size === 'number' ? `${props.size}px` : props.size
  }

  // 处理高度
  if (props.height) {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
  } else if (props.size) {
    style.height = typeof props.size === 'number' ? `${props.size}px` : props.size
  }

  // 处理颜色
  if (props.color) {
    style.color = props.color
  }

  return style
})
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}

/* 确保SVG图标可以继承颜色 */
.svg-icon use {
  fill: currentColor;
}
</style>
